/* 
可参考的：
1. 用canvas 和 jQuery.js 做的：https://www.jq22.com/demo/jQuery-tkdz20160306/  质量很好
2. https://www.jb51.net/article/181148.htm

决定先用vue结合div做一个
然后，再用canvas做一个
*/
/* 
1.坦克：
电脑：四种坦克 100-400
我方：三种坦克：一星二星三星
2.城堡
3.子弹
4.墙：土墙，河，绿地，钻石，
5.出生地
6.  
*/

new Vue({
    el:"#app",
    data:{
        col:39,
        row:51,
        total:0,
        list:[],
        car:[
            "",
            [],//我方的坦克所在位置
            [],//电脑的坦克所在的位置
        ],
        timer:0,
        min_interval:100,//最小时间间隔
        time_total:0,//总用时
        f:{
            wall:"1",//
            start:-1,
            end:-1,
        },

    },
    created(){
        this.init();
        this.all_move();
        // this.tank(2,3,76,"down");
        window.addEventListener("keydown",e=>{
            this.set_keydown(e.key);
        })
    },
    methods:{
        init(){
            var cache=fun.local("tank_map");
            if(cache){
                this.list=cache.list;
                this.car=cache.car;
                return;
            }
            this.list=[];
            var total=this.col*this.row;
            for(var i=0;i<total;i++){
                this.list.push({});
            }
            this.tank(1,1,1923,"top");
            this.tank(1,2,1937,"top");
        },
        new_enemy(){
            var code=-1;
            for(var j=0;j<4;j++){
                if(!this.car[2][j]){
                    code=j;
                    break;
                }
            }
            if(code==-1){
                console.log("敌人已经四个了",this.car[2])
                return;
            }
            var arr=[40,58,76];//敌人的三个出生地
            var i=fun.array_one(arr);
            var tds=this._get_tank_td(i);
            for(var j in tds){
                if(this.list[j].type) return;
            }
            console.log("enemy",i);
            this.tank(2,code,i,"down");
        },
        save_map(){
            var data={
                list:this.list,
                car:this.car,
            }
            fun.local("tank_map",data);
        },
        set_keydown(key){
            if(key=="j"){
                this.shot(1,1);
            }
            else if(fun.in_array(key,['w','a','s','d'])){
                var r=fun.replace(key,['w','a','s','d'],['top','left','down','right']);
                this.move_tank(1,1,r);
            }
        },
        all_move(){
            clearInterval(this.timer);
            this.timer=setInterval(()=>{
                for(var i in this.list){
                    var item=this.list[i];
                    if(item.type=="bullet"){
                        this.move_bullet(i,item.who,item.r);
                    }
                }
                this.time_total+=this.min_interval;
                if(this.time_total%2000==0){
                    this.new_enemy();
                }
            },this.min_interval)
        },
        move_tank(who,code,r){
            var i=this.car[who][code];
            var item=this.list[i];
            if(item.r!=r){
                this.tank(who,code,i,r);
            }
            var j=this.move(i,r);
            var col=j%this.col;
            var row=Math.floor(j/this.col);
            if(j==-1||col<1||col>this.col-2||row<1||row>this.row-2) return;
            var tds=this._get_tank_td(j);
            for(var k in tds){
                var v=this.list[tds[k]];
                if(v.type&&!(v.type==item.type&&v.who==item.who&&v.code==item.code) ){
                    return;
                }
            }
            this.tank(who,code,j,r);
        },
        _get_tank_td(i){
            return [i-this.col-1,i-this.col,i-this.col+1,i-1,i,i+1,i+this.col-1,i+this.col,i+this.col+1];
        },
        tank(who,code,i,r){
            var old_i=this.car[who][code];
            if(old_i){
                var old=this._get_tank_td(old_i);
                old.map(k=>{
                    this.list.splice(k,1,{});
                })
            }
            this.car[who][code]=i;//记录坦克所在的位置
            var tds=this._get_tank_td(i);
            var item={
                type:'tank',
                who,
                code,
                size:1,
                time:0,//控制射击的时间间隔
                r,
                color:who,
            }
            tds.map(j=>{
                this.list[j]=fun.copy(item);//要不要使用copy?
            })
            item=fun.copy(item);
            item.color="white";
            if(r=="right"){
                this.list.splice(i-this.col+1,1,item);
                this.list.splice(i+this.col+1,1,item);
            }else if(r=='down'){
                this.list.splice(i+this.col-1,1,item);
                this.list.splice(i+this.col+1,1,item);
            }else if(r=='left'){
                this.list.splice(i-this.col-1,1,item);
                this.list.splice(i+this.col-1,1,item);
            }else{
                this.list.splice(i-this.col-1,1,item);
                this.list.splice(i-this.col+1,1,item);
            }
        },
        shot(who,code){
            var i=this.car[who][code];
            var item=this.list[i];
            if(item.time>fun.time()){
                return;
            }
            this.move_bullet(i,who,item.r);
        },
        move(i,r,step){
            i=parseInt(i);
            var step=step==2?2:1;
            var j=i-this.col*step;//top
            if(r=='right'){
                j=i+step; 
            }else if(r=='down'){
                j=i+this.col*step;
            }else if(r=='left'){
                j=i-step;
            }
            // console.log("move",i,r,step,j)
            var total=this.row*this.col;
            if(j<0||j>total-1){
                return -1;
            }
            if( (r=="left"||r=="right") &&  Math.floor(j/this.col)!=Math.floor(i/this.col) ){
                return -1;
            }
            return j;
        },
        move_bullet(i,who,r){
            var old=this.list[i];
            if(old.time>fun.time()){
                return;
            }
            var step=old.type=='tank'?2:1;
            var j=this.move(i,r,step);
            // console.log("move_bullet",i,who,r,j);
            if(j==-1){
                this.list.splice(i,1,{});
                return;
            }
            if(this.list[j].type){
                this.hit(i,j);
                return;
            }
            var item={
                type:"bullet",
                r,
                who,
                time:fun.time()+this.min_interval,
            };
            this.list.splice(j,1,fun.copy(item));
            if(old.type=="bullet"){
                this.list.splice(i,1,{});
            }else{
                old.time=fun.time()+1000-old.size*100;
            }
        },
        hit(i,j){
            //一个格子有两种的就有问题了，比如子弹穿过自己家的坦克，子弹穿过草丝，河等
            var item=this.list[i];
            var v=this.list[j];//友军的坦克或钻石墙, 子弹,土墙,对方的坦克
            if(v.type=='bullet'){
                this.list.splice(j,1,{});
            }else if(v.type=='wall'&&v.color==1){
                var arr=[];
                if(item.r=='top'||item.r=='down'){
                    arr=[j-1,j,j+1];
                }else{
                    arr=[j-this.col,j,j+this.col];
                }
                arr.map(k=>{
                    this.list.splice(k,1,{});
                })
            }else if(v.type=='tank'&&v.who!=item.who){
                var tank_i=this.car[v.who][v.code];
                var tds=this._get_tank_td(tank_i);
                tds.map(k=>{
                    this.list.splice(k,1,{});
                })
                this.car[v.who][v.code]=0;
                if(item.who==2){
                    this.new_enemy();
                }
            }
            if(item.type=="bullet"){
                this.list.splice(i,1,{});
            }
        },
        add_wall(i){
            if(this.f.start==-1){
                this.f.start=i;
                return;
            }
            this.f.end=i;
            var item={
                type:"wall",
                color:this.f.wall,
            }
            var min=Math.min(this.f.start%this.col,this.f.end%this.col);
            var max=Math.max(this.f.start%this.col,this.f.end%this.col);
            for(var i=this.f.start;i<=this.f.end;i++){
                if(min<=i%this.col&&i%this.col<=max){
                    this.list.splice(i,1,fun.copy(item));
                }
            }
            this.f.start=-1;
            this.f.end=-1;
        }
    }
})